<template>
	<tm-fullView :text="false">
		<tm-menubars fontColor="white" :transparent="true">
			<template #left>
				<view class="flex flex-center">
					<view class="flex-col flex-center">
						<tm-images :width="64" :height="64" :round="24" src="https://img.js.design/assets/img/616678eb2769e00d41966add.jpg" model="aspectFill"></tm-images>
					</view>
					<view class="flex-col max-content line-height-1 mx-20">
						<view>
							<text class="text-size-s text-weight-b">龙轩彤</text>
						</view>
						<view>
							<text class="text-size-xxs">排行榜 8</text>
						</view>
					</view>
					<view class="follow-btn tag-accent round-24" @tap="follow">
						<view class="text-align-center fulled-height flex-col flex-center">
							<text class="text-size-s">关注</text>
						</view>
					</view>
				</view>
			</template>
			<template #default>
				<view></view>
			</template>
		</tm-menubars>
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-BAIDU -->
		<live-player class="blue fulled fulled-height live-player" src="https://domain/pull_stream" autoplay @statechange="statechange" @error="error">
			<template>
				<view class="fulled-height flex-col grey-darken-5" style="padding-top: 500rpx;">
					<view class="flex-col flex-center">
						<view class="pink text rounded flex-col flex-center" style="width: 120rpx;height: 120rpx;">
							<image class="live_bg bk" src="/static/live/live_bg.png"></image>
						</view>
						<view class="text-size-base mt-15 text-grey-lighten-1 my-30">主播还未开播，请耐心等待！</view>
					</view>
				</view>
				<!-- 直播间聊天内容展示 -->
				<view class="absolute b-0 l-0" style="z-index: 9999;">
					<view class="fulled-height px-30 py-50">
						<scroll-view :scroll-y="true" :scroll-into-view="chatScrollBottom" :scroll-with-animation="true" class="scroll-view_H">
							<template v-for="(item, index) in chatList" v-if="chatList">
								<view class="my-20 px-20 h76 bg-black-a-3 round-19" style="width: max-content;">
									<view class="my-0 fulled-height flex flex-start">
										<view class="round-20 flex flex-between px-10 py-16" :class="item.bg">
											<uni-icons type="star-filled" color="white" size="13"></uni-icons>
											<view class="mx-2"></view>
											<text class="text-size-xs relative t-0 text-weight-s">{{ item.level }}</text>
										</view>
										<view class="flex ml-10">
											<text class="text-grey-lighten-1">{{ item.name }}:</text>
											<text class="ml-10">{{ item.message }}</text>
										</view>
									</view>
									<view :id="`chat-item-${index}`"></view>
								</view>
							</template>
						</scroll-view>
						<view class="mt-n15"></view>
						<view class="fulled flex flex-between" style="width: 690rpx;">
							<view class="package_box flex flex-center flex-shrink rounded">
								<!-- <image class="package_image" src="/static/live/package.png"></image> -->
								<view class="relative t-6">
									<tm-images :width="50" :height="50" src="static/live/package.png"></tm-images>
								</view>
							</view>
							<view class="round-19 ml-20 fulled-height input_box bg-black-a-3 flex flex-start px-30">
								<input type="text" confirm-type="send" v-model="message" placeholder="聊点什么吧～" class="text-weight-s" placeholder-class="text-white text-size-s text-weight-s" :confirm-hold="true" @confirm="sendMsg" />
							</view>
							<view class="flex">
								<view class="package_box flex flex-center rounded mx-20">
									<view>
										<tm-images :width="35" :height="35" src="static/live/share_icon.png"></tm-images>
									</view>
								</view>
								<view class="zan_box rounded flex flex-center">
									<tm-images :width="32" :height="32" src="static/live/zan@3x.png"></tm-images>
								</view>
							</view>
						</view>
						<view :style="{marginBottom: `${bottomSafeHeight}px`}" v-if="bottomSafeHeight"></view>
					</view>
				</view>
			</template>
		</live-player>
		<!-- #endif -->
	</tm-fullView>
</template>

<script>
	export default {
		data() {
			return {
				enableLive: true,
				bottomSafeHeight: 0,
				statusBarHeight: 0,
				menuButtonHeight: 0 ,// 小程序胶囊按钮高度
				chatList: [
					// 演示数据
					{
						level: 2,
						bg: this.getBgByLevel(2),
						name: '杨小慧',
						message: '欢迎欢迎'
					},
					{
						level: 9,
						bg: this.getBgByLevel(9),
						name: '李文敏',
						message: '又是美好的一天'
					},
					{
						level: 4,
						bg: this.getBgByLevel(4),
						name: '李晖',
						message: '第一第一'
					},
					{
						level: 5,
						bg: this.getBgByLevel(5),
						name: '谢浩秋',
						message: '终于等到你了'
					},
					{
						level: 2,
						bg: this.getBgByLevel(2),
						name: '吕小栋',
						message: '哈哈哈哈哈哈哈'
					}
				],
				chatScrollBottom: '',
				message: ''
			}
		},
		onReady() {
			const sysinfo = uni.getSystemInfoSync();
			if (sysinfo) {
				console.log(sysinfo);
				this.bottomSafeHeight = sysinfo.safeAreaInsets.bottom;
				this.statusBarHeight = sysinfo.statusBarHeight;
				// #ifdef MP
				this.menuButtonHeight = uni.getMenuButtonBoundingClientRect().height;
				this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
				console.log(uni.getMenuButtonBoundingClientRect().height);
				// #endif
				// 模拟新来用户
				setTimeout(() => {
					this.buildMsg(6, '李明', '我来了哈哈哈哈');
					this.chatScrollBottom = `chat-item-${this.chatList.length-1}`
				}, 1500);
				this.chatList = this.chatList.reverse();
				this.chatList = [...this.chatList];
			}
		},
		computed: {
			
		},
		methods: {
			// 构建聊天信息
			buildMsg(level = 6, name = '测试用户', message = '测试信息') {
				this.chatList.push({
					level: level,
					bg: this.getBgByLevel(level),
					name: name,
					message: message
				})
				// this.chatList = this.chatList.reverse();
				this.chatList = [...this.chatList];
				this.chatScrollBottom = `chat-item-${this.chatList.length-1}`; // 聊天内容区自动滚动底部
			},
			sendMsg() {
				if (this.message) {
					this.buildMsg(3, '张三', this.message);
					this.message = '';
				}
			},
			getBgByLevel(level) {
				let bg = '';
				if (level <= 2) {
					bg = 'purple';
				} else if (level <= 4) {
					bg = 'orange';
				} else if (level <= 5) {
					bg = 'green';
				} else if (level <= 9) {
					bg = 'red';
				} else {
					bg = 'purple';
				}
				return bg;
			},
			statechange(e) {
				console.log('live-player code:', e.detail.code)
			},
			follow() {
				uni.showModal({
					title: '提示',
					content: '请自行实现关注点击处理业务',
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			error(e) {
				this.enableLive = false;
				uni.showModal({
					title: '提示',
					content: e.detail.errMsg,
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				console.error('live-player error:', e.detail.errMsg)
			}
		}
	}
</script>

<style scoped>
	.live-player {
		height: 100vh;
	}
	.live_bg {
		width: 100rpx;
		height: 100rpx;
	}
	.package_box {
		width: 76rpx;
		height: 76rpx;
		background-color: rgba(0, 0, 0, 0.3);
	}
	.zan_box {
		width: 76rpx;
		height: 76rpx;
		background: linear-gradient(144.17deg, rgba(255, 43, 110, 1) 0%, rgba(255, 52, 26, 1) 100%);
	}
	.input_box {
		width: 410rpx;
		height: 76rpx;
		/* background-color: rgba(0, 0, 0, 0.3); */
	}
	.h76 {
		height: 76rpx;
	}
	.scroll-view_H {
		max-height: 504rpx;
	}
	.bg-black-a-3 {
		background-color: rgba(0, 0, 0, 0.3);
	}
</style>
